.tooltip {
  padding: 8px 16px;
  border-radius: 3px;
  font-size: 90%;
  width: max-content;
}

.arrow {
  width: var(--rt-arrow-size);
  height: var(--rt-arrow-size);
}

[class*='react-tooltip__place-top'] > .arrow {
  transform: rotate(45deg);
}

[class*='react-tooltip__place-right'] > .arrow {
  transform: rotate(135deg);
}

[class*='react-tooltip__place-bottom'] > .arrow {
  transform: rotate(225deg);
}

[class*='react-tooltip__place-left'] > .arrow {
  transform: rotate(315deg);
}

/** Types variant **/
.dark {
  background: var(--rt-color-dark);
  color: var(--rt-color-white);
}

.light {
  background-color: var(--rt-color-white);
  color: var(--rt-color-dark);
}

.success {
  background-color: var(--rt-color-success);
  color: var(--rt-color-white);
}

.warning {
  background-color: var(--rt-color-warning);
  color: var(--rt-color-white);
}

.error {
  background-color: var(--rt-color-error);
  color: var(--rt-color-white);
}

.info {
  background-color: var(--rt-color-info);
  color: var(--rt-color-white);
}
